<template>
	<div>
		<el-row :gutter="20">
	
			<el-col :span="20">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>支付宝配置</span>
						</div>
					</template>
					<el-form label-width="160px">
                        <el-form-item label="开关微信支付："  style="width:300px;">
          <el-switch v-model="form.status"  active-value="1" inactive-value="0" active-color="#13ce66"></el-switch>
        </el-form-item> 

						<el-form-item label="appid：" prop="appid">
                             <el-input v-model="form.appid"></el-input> 
                            </el-form-item>
		
						<el-form-item label="应用私钥：">
							<el-input v-model="form.privatekey" type="textarea"></el-input>
						</el-form-item>
						<el-form-item label="应用公钥证书：">
							<el-input v-model="form.pubkey" style="width:700px;"></el-input><el-button type="primary" @click="puDialog">上传</el-button>
						</el-form-item>
                        <el-form-item label="支付宝公钥证书：">
							<el-input v-model="form.partnerid" style="width:700px;"></el-input><el-button type="primary" @click="prDialog">上传</el-button>
						</el-form-item>
                        <el-form-item label="支付宝根证书：">
							<el-input v-model="form.payment" style="width:700px;"></el-input><el-button type="primary" @click="payDialog">上传</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="上传公钥" v-model="dialogVisible" width="600px">
			<el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
			:http-request="handleHttpUpload"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
        </el-upload>
		</el-dialog>

		<el-dialog title="上传私钥" v-model="prdialogVisible" width="600px">
			<el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
			:http-request="prhandleHttpUpload"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
        </el-upload>
		</el-dialog>
		<el-dialog title="上传私钥" v-model="prdialogVisible" width="600px">
			<el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
			:http-request="payhandleHttpUpload"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
        </el-upload>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import avatar from '../assets/img/img.jpg';
import { ElMessage } from 'element-plus'
import {
    htconfigzfbData,
	uploadImg,
  } from '../api/index';
  import type { UploadProps, UploadRequestOptions } from "element-plus";
  const handle = (rawFile: any) => {
    console.log(rawFile);
};
const form = reactive({
    appid: '',
    partnerid: '',
    payment: '',
    pubkey: '',
    privatekey: '',
    status: '',
});
    //获取初始数据
    onMounted(() => {
        getAllDatas()
    });
        //表格初始查询
        const getAllDatas = () => {
            getAllListLink();
    };
const getAllListLink = () => {
let params = {
  action: 'apiindex', 
}
htconfigzfbData(params).then(res => {

  if (res.status == 200) {
    form.appid=res.data.rows[0].appid,
      form.partnerid=res.data.rows[0].partnerid,
      form.payment=res.data.rows[0].payment,
    form.pubkey=res.data.rows[0].pubkey,
      form.privatekey=res.data.rows[0].privatekey,
    form.status=res.data.rows[0].status
  } else if (res.status  !== 200) {
    ElMessage.error(res.statusText);
  }
})
};
const onSubmit = () => {

    let params = {
      action: 'apiedit',
      appid: form.appid,
      partnerid: form.partnerid,
      payment: form.payment,
      pubkey: form.pubkey,
      privatekey: form.privatekey,
      status: form.status,
    }
    htconfigzfbData(params).then(res => {
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
};


const avatarImg = ref(avatar);
const pravatarImg = ref(avatar);
const imgSrc = ref('');
const primgSrc = ref('');
const dialogVisible = ref(false);
const prdialogVisible = ref(false);

const payavatarImg = ref(avatar);
const payimgSrc = ref('');
const paydialogVisible = ref(false);

const puDialog = () => {
	dialogVisible.value = true;
	imgSrc.value = avatarImg.value;
};
const prDialog = () => {
	prdialogVisible.value = true;
	primgSrc.value = pravatarImg.value;
};
const payDialog = () => {
	paydialogVisible.value = true;
	payimgSrc.value = payavatarImg.value;
};

const handleHttpUpload = async (options: UploadRequestOptions) => {
  let formData = new FormData();
  formData.append("file", options.file);
  try {
    
  await uploadImg(formData).then(res => {
 
            if (res.data.code == 1) {
                    // data.fullurl = res.data.data.fullurl;
                    // data.url = res.data.data.url;
					form.pubkey=res.data.data.url;
            } else if (res.data.code !== 1) {
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })

      

        let param={
    content:'b'
  }
  } catch (error) {
    options.onError(error as any);
  }
};
const prhandleHttpUpload = async (options: UploadRequestOptions) => {
  let formData = new FormData();
  formData.append("file", options.file);
  try {
    
  await uploadImg(formData).then(res => {
 
            if (res.data.code == 1) {
				form.partnerid=res.data.data.url;
            } else if (res.data.code !== 1) {
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })

      

        let param={
    content:'b'
  }
  } catch (error) {
    options.onError(error as any);
  }
};
const payhandleHttpUpload = async (options: UploadRequestOptions) => {
  let formData = new FormData();
  formData.append("file", options.file);
  try {
    
  await uploadImg(formData).then(res => {
 
            if (res.data.code == 1) {
				form.payment=res.data.data.url;
            } else if (res.data.code !== 1) {
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })

      

        let param={
    content:'b'
  }
  } catch (error) {
    options.onError(error as any);
  }
};
</script>

<style scoped>
.info {
	text-align: center;
	padding: 35px 0;
}
.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-edit i {
	color: #eee;
	font-size: 25px;
}
.info-image:hover .info-edit {
	opacity: 1;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}
.crop-demo-btn {
	position: relative;
}
.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
